{{extend '../layout/layAdmin.html'}}

{{block 'head'}}

<style>
    .fa {
        margin: 8px;
        font-size: 18px;
    }

    #allIconModal {
        display: none;
        position: absolute;
       
        background: #f00;
    }
</style>

{{/block}}

{{block 'body'}}
<div class="container-fluid">
    <div class="row">
        <button type="button" class="btn btn-primary btn-mini open-modal">
            Icon 一览
        </button>
    </div>
</div>
<div id="allIconModal">

</div>


{{/block}}


{{block 'script'}}
<script>

    layui.use('layer', function () {
        var layer = layui.layer;

        ready()
    });

    function ready() {
        $.getJSON('/static/icons.json', function (json) {
            $('#allIconModal').empty()
            $(json).each(function () {
                $('#allIconModal').append('<a href="#" >' + '<i class="' + this + '">' + '</i>' + '</a>')
            })

            $('.open-modal').on('click', function () {
            console.log('hahahahahaha')
            layer.open({
                type: 1,
                area:['500px','300px'],
                content: $('#allIconModal') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        })
        })


     
    }


</script>
{{/block}}